import { Meta } from '@storybook/blocks';

import * as BottomAppBarStories from '../stories/BottomAppBar.stories';

<Meta of={BottomAppBarStories} />

# BottomAppBar

A container that is typically used with Scaffold.bottomNavigationBar, and can have a notch along the top that makes room for an overlapping FloatingActionButton.

## Example

```dart liveslice=BottomAppBar mockup=iPhone7
Scaffold(
  bottomNavigationBar: BottomAppBar(
    color: Colors.white,
    child: Container(
      child: Text('BottomAppBar'),
    ),
  ),
  floatingActionButton: FloatingActionButton(onPressed: null),
);
```

## Related Links

- https://api.flutter.dev/flutter/material/BottomAppBar-class.html
